<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>学成在线教育平台-不是每个网站都叫学成在线</title>
    <link rel="stylesheet" href="CSS/base.css">
    <link rel="stylesheet" href="CSS/index.css">
    <link rel="shortcut icon" href="favicon.ico" />
    <style>

    </style>
</head>
<body>
    <header>
        <div class="logo">
            <h1>
                 <a href="#" title="学成在线教育平台">学生在线</a>
            </h1>
        </div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>    
            </ul>
        </nav>
        <div class="search">
           <input type="search" name="" id="" placeholder="请输入关键字">
           <button></button>
        </div>
        <div class="personal">
             <dl>
                 <dd>个人中心</dd>
                 <dt>
                     <s><img src="./images/ld.png" alt=""></s>
                     <span><img src="./images/pic.png" alt="">刘德华 andy</span>
                 </dt>
             </dl>
        </div>
    </header>
    <div class="banner">
        <div class="w inner">
            <ul>
                <li><a href="#"><img src="./images/banner.jpg" alt=""></a></li>
                
            </ul>
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发<span>></span></a></li>
                    <li><a href="#">后端开发<span>></span></a></li>
                    <li><a href="#">人工智能<span>></span></a></li>
                    <li><a href="#">商业预测<span>></span></a></li>
                    <li><a href="#">云计算&大数据<span>></span></a></li>
                    <li><a href="#">运维&测试<span>></span></a></li>
                    <li><a href="#">UI设计<span>></span></a></li>
                    <li><a href="#">产品<span>></span></a></li>
                    <li><a href="#">前端开发<span>></span></a></li>
                    
                </ul>
            </div>
            <div class="circle">
                <i class="current"></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
            <div class="timebook">
                <dl>
                    <dd>我的课程表</dd>
                    <dt>
                        <a href="#">
                        <span>继续学习 程序语言设计</span>
                        <p>正在学习-使用对象</p>
                        </a>
                    </dt>
                    <dt>
                        <a href="#">
                        <span>继续学习 程序语言设计 </span>
                        <p>正在学习-使用对象</p>
                        </a> 
                    </dt>
                    <dt>
                        <a href="#">
                        <span>继续学习 程序语言设计</span>
                        <p>正在学习-使用对象</p>
                        </a>
                    </dt>
                   
                </dl>
                <ul>
                    <li><a href="#"><p>全部课程</p></a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 精品推荐 -->
     <div class="recommend w">
       <div class="rec-l">
           <strong>精品推荐</strong>
           <a href="#">JQuery</a> |
           <a href="#">Spark</a> |
           <a href="#">MySQL</a> |
           <a href="#">JavaWeb</a> |
           <a href="#">MySQL</a> |
           <a href="#">JavaWeb</a> |
       </div>
       <em>修改兴趣</em>
     </div>
    <div class="products w">
        <div class="pro-hd">
            <h4>精品推荐</h4>
            <a href="#">查看全部</a>
        </div>
        <div class="pro-bd clearfix">
            <ul>
                <li>
                    <div class="pic">
                        <img src="./images/pic1.png" alt="">
                    </div>
                    <div class="pic-title">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <P>
                        <span>高级</span> · 1125人在学习
                    </P>
                </li>
                <li>
                    <div class="pic">
                        <img src="./images/pic1.png" alt="">
                    </div>
                    <div class="pic-title">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <P>
                        <span>高级</span> · 1125人在学习
                    </P>
                </li>
                <li>
                    <div class="pic">
                        <img src="./images/pic1.png" alt="">
                    </div>
                    <div class="pic-title">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <P>
                        <span>高级</span> · 1125人在学习
                    </P>
                </li>
                <li>
                    <div class="pic">
                        <img src="./images/pic1.png" alt="">
                    </div>
                    <div class="pic-title">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <P>
                        <span>高级</span> · 1125人在学习
                    </P>
                </li>
                <li>
                    <div class="pic">
                        <img src="./images/pic1.png" alt="">
                    </div>
                    <div class="pic-title">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <P>
                        <span>高级</span> · 1125人在学习
                    </P>
                </li>
                <li>
                    <div class="pic">
                        <img src="./images/pic1.png" alt="">
                    </div>
                    <div class="pic-title">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <P>
                        <span>高级</span> · 1125人在学习
                    </P>
                </li>
                <li>
                    <div class="pic">
                        <img src="./images/pic1.png" alt="">
                    </div>
                    <div class="pic-title">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <P>
                        <span>高级</span> · 1125人在学习
                    </P>
                </li>
                <li>
                    <div class="pic">
                        <img src="./images/pic1.png" alt="">
                    </div>
                    <div class="pic-title">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <P>
                        <span>高级</span> · 1125人在学习
                    </P>
                </li>
                <li>
                    <div class="pic">
                        <img src="./images/pic1.png" alt="">
                    </div>
                    <div class="pic-title">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <P>
                        <span>高级</span> · 1125人在学习
                    </P>
                </li>
                <li>
                    <div class="pic">
                        <img src="./images/pic1.png" alt="">
                    </div>
                    <div class="pic-title">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <P>
                        <span>高级</span> · 1125人在学习
                    </P>  
                </li>
            </ul>
        </div>
    </div>
    <!-- 页面底部 -->
    <footer>
        <div class="w">
            <div class="footerleft">
                <img src="./images/logo.png" alt="logo" height="42">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。 <br>2017年XTCG Inc 保留所有权利。 -沪ICP备15025210号</p>
                <a href="# ">下载APP</a>
            </div>
            <div class="footerright">
               <dl>
                   <dt>关于学成网</dt>
                   <dd>关于</dd>
                   <dd>管理团队</dd>
                   <dd>工作机会</dd>
                   <dd>客户服务</dd>
                   <dd>帮助</dd>
               </dl>
               <dl>
                    <dt>关于学成网</dt>
                    <dd>关于</dd>
                    <dd>管理团队</dd>
                    <dd>工作机会</dd>
                    <dd>客户服务</dd>
                    <dd>帮助</dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd>关于</dd>
                    <dd>管理团队</dd>
                    <dd>工作机会</dd>
                    <dd>客户服务</dd>
                    <dd>帮助</dd>
                </dl>
            </div>
        </div>

    </footer>
</body> 
</html>